<template>
  <el-cascader
    ref="catalogue"
    :value="values"
    :options="options"
    :props="propOptions"
    :show-all-levels="showAllLevels"
    :size="size"
    :disabled="disabled"
    :placeholder="placeholder"
    :filterable="filterable"
    :clearable="clearable"
    @change="change"
    style="width: 217px"
  ></el-cascader>
</template>

<script>
/**
 * 通过接口获取数据生成element ui级联选择组件(Cascader)
 */
import request from "@/utils/request";
import apis from "@/components/Select/CascaderSelect/constants";
import { treeChildEmpty } from "@/utils/index";

export default {
  name: "CascaderSelect",
  props: {
    /**
     * 分类 值对应constants object key
     */
    varient: { type: [String, Number], required: false },
    isLocal: { type: Boolean, default: false },
    /**
     * 初始值
     */
    values: { type: [String, Number, Array], default: () => [] },
    showAllLevels: { type: Boolean, default: false },
    filterable: { type: Boolean, default: true },
    /**
     * @ignore
     * 详见element ui
     */
    clearable: { type: Boolean, default: true },
    /**
     * @ignore
     * 详见element ui
     */
    propOptions: {
      type: Object,
      default: () => ({
        value: "id",
        children: "children",
        label: "label",
        checkStrictly: true,
        expandTrigger: "hover",
      }),
    },
    /**
     * @ignore
     * 详见element ui
     */
    size: { type: String, default: "small" },
    placeholder: {
      type: String,
      default: "请选择",
    },
    replace: { type: Array, default: () => [] },
    disabled: { type: Boolean, default: false },
    requestMethod: {
      type: String,
      default: "get",
      require: false,
    },
  },
  data() {
    return {
      options: [],
      key: 0,
    };
  },
  watch: {
    values: function (value) {
      this.values = value;
    },
  },
  async created() {
    if (this.isLocal) {
      const data = await require("./" + this.varient + ".json");
      this.options = data.data;
    } else {
      if (!apis[this.varient]) return;

      request({
        url: apis[this.varient],
        method: this.requestMethod || "get",
      }).then((response) => {
        if (this.varient == "zousanArea") {
          if (response && response.length > 0) {
            this.options = treeChildEmpty(
              response,
              this.propOptions,
              this.replace
            );
          }
        } else {
          if (response && response.data.length > 0) {
            this.options = treeChildEmpty(
              response.data,
              this.propOptions,
              this.replace
            );
          }
        }
      });
    }
  },
  methods: {
    change(value) {
      let label = "";
      if (
        this.$refs.catalogue.getCheckedNodes() &&
        this.$refs.catalogue.getCheckedNodes().length > 0
      ) {
        label = this.$refs.catalogue.getCheckedNodes()[0].pathLabels;
      }
      this.$emit("input", value, label);
      this.$refs.catalogue.toggleDropDownVisible();
    },
  },
};
</script>
